<template>
  <div class="assessment_questionnaire">
    <c-title :hide="false" :text="info.name"></c-title>
    <div class="list" v-if="!this.$route.params.view && has_many_question[questionInd]">
      <div class="title"><span class="md">*</span>{{ questionInd + 1 }}.{{ has_many_question[questionInd].name }}</div>
      <div class="group">
        <div class="group_c" v-for="(item, index) in has_many_question[questionInd].has_many_answer" :key="index" @click="radioChange(item.id, has_many_question[questionInd].id)">
          <van-icon name="checked" size="1.3rem" color="#FE5E56" v-if="item.id == question_list[has_many_question[questionInd].id]" />
          <van-icon name="circle" size="1.3rem" color="#AAAAB3" v-else />
          <span class="ctxt">{{ item.answer }}</span>
        </div>
      </div>
    </div>
    <!-- 查看问卷记录 -->
    <template v-if="this.$route.params.view">
      <div class="list" v-for="(item, index) in has_many_question" :key="index">
        <div class="title"><span class="md">*</span>{{ index + 1 }}.{{ item.name }}</div>
        <div class="group group_record">
          <van-radio-group v-model="item.select_value" disabled>
            <van-radio :name="child.id" checked-color="#FE5E56" v-for="(child, ind) in item.has_many_answer" :key="ind">
            <div class="textAll">{{ child.answer }}</div>
            </van-radio>
          </van-radio-group>
        </div>
      </div>
    </template>
    <div class="btnBox">
      <template v-if="this.$route.params.view">
        <div class="next" @click="watchReport">查看报告</div>
      </template>
      <template v-else>
        <div class="next Prev" v-if="questionInd != 0" @click="prevShow">上一题</div>
        <div class="next" v-if="questionInd != has_many_question.length - 1" @click="showNext">下一题</div>
        <div class="next" v-if="questionInd == has_many_question.length - 1" @click="submitM">提交</div>
      </template>
    </div>
    <van-popup v-model="show" :style="{ background: 'transparent' }">
      <div class="submitPopupimg">
        <img :src="imgHost" alt="" />
      </div>
      <div class="submitPopup">
        <div class="txt">{{this.$route.params.view?'您未生成报告，是否生成测评报告？':'提交完成，是否查看测评报告？'}}</div>
        <div class="freeBtn" @click="Unlock">{{ resultDetail.rest_count > 0 ? "免费查看" : "付费查看" }}</div>
        <div class="cancelBtn" @click="show = fale">取消</div>
        <div class="txt_tips" v-if="resultDetail.rest_count > 0">剩余免费查看次数为：{{ resultDetail.rest_count }}</div>
      </div>
      <div class="closeBtn">
        <i class="iconfont icon-adsystem_icon_cancle" @click="show = false"></i>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: "",
      show: false,
      imgHost: "",
      info: [],
      questionInd: 0,
      has_many_question: [],
      question_list: {},
      resultDetail: []
    };
  },
  activated() {
    this.init();
    this.imgHost = `${window.location.origin}/static/local/assessment/assessment_icon_1.png`;
    this.getData();
  },
  methods: {
    init() {
      this.questionInd = 0;
      this.radio = "";
      this.info = "";
      this.question_list = {};
      this.show = false;
    },
    radioChange(id, ind) {
      this.$set(this.question_list, ind, id);
    },
    watchReport() {
      console.log(this.$route.params.id);
      // this.resultPost(this.$route.params.id)
      $http
        .post("plugin.assessment.frontend.question.resultDetail", { id: this.$route.params.id }, "")
        .then(response => {
          if (response.result === 1) {
            if (response.data.is_pay == 1) {
              this.$router.push(this.fun.getUrl("assessmentReport", { id: response.data.id }));
              return;
            }
            this.show = true;
            this.resultDetail = response.data;
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    async submitM() {
      for (let i = 0; i < this.has_many_question.length; i++) {
        if (!this.question_list.hasOwnProperty(this.has_many_question[i].id)) {
          this.$toast(`选项${i + 1}请完善`);
          return;
        }
      }
      await this.submitPost();
      // console.log(this.question_list);
      // this.show = true
    },
    submitPost() {
      let json = {
        id: this.info.id,
        question_list: this.question_list
      };
      $http
        .post("plugin.assessment.frontend.question.submit", json, "")
        .then(response => {
          if (response.result === 1) {
            this.resultPost(response.data.id);
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    resultPost(rid) {
      $http
        .post("plugin.assessment.frontend.question.resultDetail", { id: rid }, "")
        .then(response => {
          if (response.result === 1) {
            this.show = true;
            this.resultDetail = response.data;
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    Unlock() {
      if (this.resultDetail.is_pay == 0 && this.resultDetail.rest_count > 0) {
        // 免费
        $http
          .post("plugin.assessment.frontend.question.freeResult", { id: this.resultDetail.id }, "")
          .then(response => {
            if (response.result === 1) {
              // 跳转过去报告页面，左上角返回要指定回 测评首页
              this.$router.push(this.fun.getUrl("assessmentReport", { id: this.resultDetail.id, view: true }));
            } else {
              this.$toast(response.msg);
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        // 付费
        $http
          .post("plugin.assessment.frontend.create.index", { ass_log_id: this.resultDetail.id }, "")
          .then(response => {
            if (response.result === 1) {
              this.$router.push(this.fun.getUrl("orderpay_assessment", { order_ids: response.data.order_ids, ass_log_id: this.resultDetail.id }));
            } else {
              this.$toast(response.msg);
            }
          })
          .catch(error => {
            console.log(error);
          });
        // this.$router.push(this.fun.getUrl("orderpay_assessment", { order_ids: this.resultDetail.id, orderType: "assessment" }));
      }
    },
    prevShow() {
      this.questionInd = this.questionInd - 1;
    },
    showNext() {
      this.questionInd = this.questionInd + 1;
    },
    getData() {
      let json = {};
      if (!this.$route.params.view) {
        json.third_cat_id = this.$route.params.id;
      } else {
        json.id = this.$route.params.id;
        this.getDateil(json);
        return;
      }
      $http
        .post("plugin.assessment.frontend.question.detail", json, "")
        .then(response => {
          if (response.result === 1) {
            this.info = response.data;
            this.has_many_question = response.data.has_many_question;
          } else {
            this.$router.go(-1);
            this.$toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查看测评记录
    getDateil(json) {
      $http
        .post("plugin.assessment.frontend.question.questionDetail", json, "")
        .then(response => {
          if (response.result === 1) {
            console.log(response.data);
            this.info = response.data;
            this.has_many_question = response.data.has_many_question;
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.assessment_questionnaire {
  overflow: hidden;
  padding-bottom: 4rem;
  .btnBox {
    // margin: 0 1.53rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0.94rem;
    left: 0;
    width: 100%;
    padding: 0 1.53rem;
    .next {
      flex: 1;
      height: 2.5rem;
      background: #f15353;
      text-align: center;
      line-height: 2.5rem;
      color: #ffffff;
      border-radius: 1.25rem;
    }
    .Prev {
      background: #f5f5f5;
      border: 0.03rem solid #f15353;
      color: #f15353;
      margin-right: 0.78rem;
    }
  }
  .list {
    margin: 0.63rem 0.75rem;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 1.25rem 0.75rem;
    box-sizing: border-box;
    .group_record{
      .van-radio{
        align-items: flex-start;
      }    
    }
    .group {
      margin-top: 1rem;
      .van-radio {
        margin-bottom: 1rem;
      }
      .van-radio:last-child {
        margin-bottom: 0;
      }
      .group_c {
        margin-bottom: 1rem;
        display: flex;
        justify-content: flex-start;
        .ctxt {
          font-size: 0.88rem;
          margin-left: 0.69rem;
          text-align: left;
          overflow: hidden;
          word-break: break-all;
        }
      }
      .group_c:last-child {
        margin-bottom: 0;
      }
      
      .textAll{
        font-size: 0.88rem;
        margin-left: 0.69rem;
        text-align: left;
        overflow: hidden;
        word-break: break-all;
      }
    }
    .title {
      text-align: left;
      font-size: 0.94rem;
      font-weight: bold;
      color: #00001c;
      .md {
        color: #f15353;
      }
    }
  }
  .submitPopupimg {
    width: 9.375rem;
    height: 7.8125rem;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .submitPopup {
    width: 15.63rem;
    background: #ffffff;
    border-radius: 0.75rem;
    margin-top: -4.4688rem;
    padding-top: 4.16rem;
    padding-bottom: 1.09rem;
    .freeBtn {
      width: 11.06rem;
      height: 2.25rem;
      background: #f15353;
      border-radius: 1.25rem;
      text-align: center;
      line-height: 2.25rem;
      font-size: 0.88rem;
      color: #ffffff;
      margin: 0 auto;
      margin-top: 1.44rem;
    }
    .cancelBtn {
      width: 11.06rem;
      height: 2.25rem;
      border: 0.03rem solid #d6d6dc;
      border-radius: 1.25rem;
      text-align: center;
      line-height: 2.25rem;
      margin: 0 auto;
      margin-top: 0.63rem;
    }
    .txt_tips {
      font-size: 0.75rem;
      color: #6e6e79;
      text-align: center;
      margin-top: 0.8rem;
    }
    .txt {
      font-size: 0.88rem;
      font-weight: 500;
    }
  }
  .closeBtn {
    width: 15.63rem;
    text-align: center;
    margin-top: 1.25rem;
    .icon-adsystem_icon_cancle {
      font-size: 3rem;
      color: #d6d6dc;
    }
  }
}
</style>
